﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Start Template for vpGrid</title>
    <!-- CSS -->
    <!-- CSS for jQuery UI with vpGrid theme-->
    <link href="Styles/jQuery-UI/vpGrid/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />

    <!-- CSS for qTip2-->
    <link href="Styles/qTip2/qTip2-2.2.0/jquery.qtip.min.css" rel="stylesheet" />

    <!-- CSS for jqGrid 4.6.0-->
    <link href="Styles/jqGrid/jqGrid-4.6.0/ui.jqgrid.css" rel="stylesheet" />

    <!-- CSS for vpGrid -->
    <link href="Styles/vpGrid/vpGrid-1.1.6.css" rel="stylesheet" />

    <!-- CSS for your Grid (to override any of the above CSS) -->
    <link href="Styles/myGrid/myGrid-0.0.1.css" rel="stylesheet" />


    <!-- JS -->
    <!-- JS for jQuery -->
    <script src="Scripts/jQuery/jquery-1.11.0.min.js"></script>

    <!-- JS for jQuery UI : reference the appropriate datepicker language for your Grid-->
    <script src="Scripts/jQuery-UI/jquery-ui-1.10.4.custom.min.js"></script>
    <script src="Scripts/jQuery-UI/i18n/jquery.ui.datepicker-en-GB.js"></script>

    <!-- JS for qTip2 : do not reference the min version for IE-->
    <script src="Scripts/qTip2/qTip2-2.2.0/jquery.qtip.js"></script>

    <!-- JS for jqGrid : reference the appropriate language for your Grid-->
    <script src="Scripts/jqGrid/jqGrid-4.6.0/i18n/grid.locale-en.js"></script>
    <script src="Scripts/jqGrid/jqGrid-4.6.0/jquery.jqGrid.min.js"></script>

    <!-- JS for vpGrid : : reference the appropriate language for your Grid-->
    <script src="Scripts/vpGrid/vpGrid-1.1.6.js"></script>
    <script src="Scripts/vpGrid/i18n/vpGrid-1.1.6.locale-en.js"></script>

    <!-- JS for your Grid : your event handlers and all the grid customization work-->
    <script src="Scripts/myGrid/myGrid-0.0.1.js"></script>

</head>
<body>
    <!-- All components of vpGrid MUST be defined in div role="vpgrid-container" -->
    <div role="vpgrid-container" class="vpgrid-container">

        <!-- The grid is composed of the following parts :
            1°) Grid Title
            2°) Grid Body   -> where all data is displayed
            3°) Grid footer -> contains all buttons for item or grid processing 
            4°) Partial layouts -> small UI parts that are dynamically injected in the grid
            5°) Modal dialog windows
        -->

        <!--  Grid Title-->
        <h1 class="vpgrid-title">vpGrid in action</h1>

        <!-- Grid body -->
        <div role="vpgrid-body">

            <!-- Grid Configuration : headers and columns-->
            <table role="vpgrid-schema" class="vpgrid-hidden">
                
                <!-- Configuration of caption, headers and columns -->
                <thead>
                    <!-- Configuration of custom caption 
                         Configuration starts with <div role="vpgrid-schema-caption"> 
                    -->
                    <tr class="ui-widget-header">
                        <th colspan="18">
                            <div role="vpgrid-schema-caption">
                                <span class="left">
                                    View products :
                                    <select id="kindOfProducts"
                                            data-vpgrid-ui-element="true"
                                            data-vpgrid-remote-data-filter-key="TypeOfProduct"
                                            data-vpgrid-datasource="MockRequests/GetKeyValues_AllKindOfProducts.html"
                                            data-vpgrid-datasource-type="web"
                                            data-vpgrid-timeline-sequence="GridLoaded"
                                            data-vpgrid-handlers='{"change" : { "handler" : "MyCompany.MyGrid.onSelectChangedEventHandler1", "params":"kindOfProducts",  "async" : true, "asyncKey" : "onSelectChange"}}'></select>

                                </span>
                                <span role="vpgrid-ajax-trace" class='vpgrid-ajax-trace'></span>

                            </div>
                        </th>
                    </tr>
                    <!-- End Configuration of custom caption -->

                    <!-- Configuration of the Grid Columns -->
                    <tr role="vpgrid-schema-columns" class="ui-widget-header">

                        <th class="center"
                            data-vpgrid-column-name="remoteId"
                            data-vpgrid-column-type="key"
                            data-vpgrid-column-width="1"
                            data-vpgrid-column-hidden="true"
                            data-vpgrid-column-editable="false">Remote ID</th>

                        <th class="center"
                            data-vpgrid-column-name="name"
                            data-vpgrid-column-type="string"
                            data-vpgrid-column-width="30"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="true"
                            data-vpgrid-column-required="true"
                            data-vpgrid-column-align="left"
                            data-vpgrid-column-css="vpgrid-cell">Product Name</th>


                        <th class="center"
                            data-vpgrid-column-name="producNumber"
                            data-vpgrid-column-type="string"
                            data-vpgrid-column-width="80"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="false"
                            data-vpgrid-column-required="false"
                            data-vpgrid-column-align="left"
                            data-vpgrid-column-css="vpgrid-cell">Product Number</th>

                        <th class="center"
                            data-vpgrid-column-name="salable"
                            data-vpgrid-column-type="string"
                            data-vpgrid-column-width="30"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="true"
                            data-vpgrid-column-edittype="select"
                            data-vpgrid-select-options="Yes:Yes;No:No;Maybe:Maybe"
                            data-vpgrid-column-align="center">On Sale</th>

                        <th class="center"
                            data-vpgrid-column-name="price"
                            data-vpgrid-column-type="currency"
                            data-vpgrid-column-width="30"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="true"
                            data-vpgrid-column-required="true"
                            data-vpgrid-column-min-value="0"
                            data-vpgrid-column-max-value="6000"
                            data-vpgrid-column-align="right"
                            data-vpgrid-column-css="vpgrid-cell"
                            data-vpgrid-column-info="End user price. Does not include VAT">Price</th>

                        <th class="center"
                            data-vpgrid-column-name="style"
                            data-vpgrid-column-type="string"
                            data-vpgrid-column-width="60"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="true"
                            data-vpgrid-column-edittype="select"
                            data-vpgrid-column-align="left"
                            data-vpgrid-column-css="vpgrid-cell">Style</th>

                        <th class="center"
                            data-vpgrid-column-name="safetyStockLevel"
                            data-vpgrid-column-type="int"
                            data-vpgrid-column-min-value="10"
                            data-vpgrid-column-max-value="1200"
                            data-vpgrid-column-width="50"
                            data-vpgrid-column-fixed-width="true"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="true"
                            data-vpgrid-column-align="center"
                            data-vpgrid-column-css="vpgrid-cell">Safety Stock Level</th>

                        <th class="center"
                            data-vpgrid-column-name="color"
                            data-vpgrid-column-type="string"
                            data-vpgrid-column-width="60"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="true"
                            data-vpgrid-column-edittype="autocomplete"
                            data-vpgrid-column-align="left"
                            data-vpgrid-column-css="vpgrid-cell">Color</th>

                        <!--8th column-->
                        <th class="center"
                            data-vpgrid-column-name="weight"
                            data-vpgrid-column-type="number"
                            data-vpgrid-column-width="60"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="true"
                            data-vpgrid-column-required="false"
                            data-vpgrid-column-min-value="0"
                            data-vpgrid-column-max-value="1200"
                            data-vpgrid-column-align="left"
                            data-vpgrid-column-css="vpgrid-cell">Weight (LB)</th>


                        <!--2nd column-->
                        <th class="center"
                            data-vpgrid-column-name="year"
                            data-vpgrid-column-type="year"
                            data-vpgrid-column-width="60"
                            data-vpgrid-column-fixed-width="true"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="true"
                            data-vpgrid-column-edittype="select"
                            data-vpgrid-column-align="center"
                            data-vpgrid-column-min-value=2010
                            data-vpgrid-column-max-value=2015
                            data-vpgrid-column-css="vpgrid-cell">Year</th>

                        <th class="center"
                            data-vpgrid-column-name="comments"
                            data-vpgrid-column-type="note"
                            data-vpgrid-column-width="60"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="true"
                            data-vpgrid-column-align="left"
                            data-vpgrid-column-css="vpgrid-cell">Comments</th>

                        <!-- column required to manage item deletion -->
                        <th class="center"
                            data-vpgrid-column-name="isDeletable"
                            data-vpgrid-column-type="actionValidator"
                            data-vpgrid-column-actiontype="deleteItem"
                            data-vpgrid-column-width="20"
                            data-vpgrid-column-fixed-width="true"
                            data-vpgrid-column-hidden="true"
                            data-vpgrid-column-editable="false"
                            data-vpgrid-column-sortable="false"
                            data-vpgrid-column-align="center"></th>

                        <!-- column required to show the delete item  button-->
                        <th class="center"
                            data-vpgrid-column-name="delete"
                            data-vpgrid-column-type="action"
                            data-vpgrid-column-actiontype="deleteItem"
                            data-vpgrid-column-width="20"
                            data-vpgrid-column-fixed-width="true"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="false"
                            data-vpgrid-column-sortable="false"
                            data-vpgrid-column-align="center"></th>

                        <!-- column required to manage item update-->
                        <th class="center"
                            data-vpgrid-column-name="isUpdatable"
                            data-vpgrid-column-type="actionValidator"
                            data-vpgrid-column-actiontype="updateItem"
                            data-vpgrid-column-width="10"
                            data-vpgrid-column-hidden="true"
                            data-vpgrid-column-editable="false"
                            data-vpgrid-column-sortable="false"
                            data-vpgrid-column-css="vpgrid-cell"></th>

                    </tr>
                    <!-- End Configuration of the Grid Columns -->

                </thead>
                <!-- End configuration of caption, headers and columns -->

                <!-- configuration of the status bar of the grid 
                    the vpGrid Status bar can be hidden or showed throug the option parameter :
                    enableCustomStatusBar: true|false
                -->
                <tfoot>
                    <tr class="ui-widget-header" colspan="8">
                        <td>
                            <div role="vpgrid-schema-status-bar">
                                <!-- The status bar can contain several distinct groups-->
                                <!-- Each group is isolated within a div class="vpgrid-status-group" -->
                                <div class="vpgrid-status-group">
                                    Items :
                                    <span data-vpgrid-ui-content-placeholder="true"
                                          data-vpgrid-ui-id="vpGrid.filteredItemCount"
                                          data-vpgrid-datasource="vpGrid.filteredItemCount"
                                          data-vpgrid-datasource-type="handler"
                                          data-vpgrid-timeline-sequence="GridLoaded">
                                    </span>
                                    
                                    /
                                    <span data-vpgrid-ui-content-placeholder="true"
                                          data-vpgrid-ui-id="vpGrid.totalItemCount"
                                          data-vpgrid-datasource="vpGrid.totalItemCount"
                                          data-vpgrid-datasource-type="handler"
                                          data-vpgrid-timeline-sequence="GridLoaded">
                                    </span>
                                  

                                </div>
                                <!-- End status group-->

                                <!-- status group to show the loading progress in the UI of the received data-->
                                <div class="vpgrid-status-group"
                                     data-vpgrid-ui-id="dataLoadingStatus">
                                    Loading data in grid (
                                    <span data-vpgrid-ui-id="dataLoadingProgress"></span>)
                                </div>
                                <!-- End statsus group-->
                            </div>
                        </td>
                    </tr>
                </tfoot>
                <!-- configuration of the status bar of the grid -->

            </table>
            <!-- End Grid Configuration : headers and columns-->

        </div>
        <!-- End Grid body-->

        <!-- grid footer -->
        <div role="vpgrid-footer" class="vpgrid-footer ui-jqgrid ui-widget ui-widget-content ui-corner-bottom no-border">
            
            <div role="vpgrid-ribbon"
                 class="vpgrid-footer-body">
                <!-- this button enables to create a new item inside a jQuery UI dialog.
                    All form fields ara embedded in a fluent 12 columns grid. 
                    This fluent grid is inspired from twitter Bootstrap.
                    Click on this button will open the UI-Dialog identified by the params value : "params":"vpGridAddNewItem"
                    -->
                <button type="button" class="ui-button-text-icon-primary ui-icon-plusthick"
                        data-vpgrid-ui-widget="button"
                        data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-plusthick"}}'
                        data-vpgrid-timeline-sequence="GridLoading"
                        data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.openModalDialog", "params":"vpGridAddNewItem",  "async" : true, "asyncKey" : "onNewItemClick"}}'>
                    Add a new Item
                </button>

                <!-- this button enables to create a new item inside a jQuery UI dialog with Tabs
                    Click on this button will open the UI-Dialog identified by the params value : "params":"vpGridAddNewItemWithTabs"
                -->
                <button type="button" class="ui-button-text-icon-primary ui-icon-plusthick"
                        data-vpgrid-ui-widget="button"
                        data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-plusthick"}}'
                        data-vpgrid-timeline-sequence="GridLoading"
                        data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.openModalDialog", "params":"vpGridAddNewItemWithTabs",  "async" : true, "asyncKey" : "onNewItemClick"}}'>
                    Add a new Item (UI tabs)
                </button>

                <!-- this button enables to view/edit the selected item inside a jQuery UI dialog with Tabs
                Click on this button will open the UI-Dialog identified by the params value : "params":"vpGridAddNewItemWithTabs"    
                -->
                <button type="button" class="ui-button-text-icon-primary ui-icon-pencil"
                        data-vpgrid-ui-widget="button"
                        data-vpgrid-ui-disabled="true"
                        data-vpgrid-ui-disabled-on="noItemSelected"
                        data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-pencil"}}'
                        data-vpgrid-timeline-sequence="GridLoading"
                        data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.openModalDialogWithSelectedItem", "params":"vpGridEditItemWithTabs",  "async" : true, "asyncKey" : "onEditItemClick"}}'>
                    View/Edit selected Item (UI tabs)
                </button>

                <!-- this button enables to open another vpGrid web page or any Web page (in the same doamin) within a jQuery UI Dialog
                Click on this button will open the UI-Dialog identified by the params value : "params":{"dialogId":"serverSideDialog1", ...    
                -->
                <button type="button" class="ui-button-text-icon-primary ui-icon-search"
                        data-vpgrid-ui-widget="button"
                        data-vpgrid-ui-disabled="true"
                        data-vpgrid-ui-disabled-on="noItemSelected"
                        data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-search"}}'
                        data-vpgrid-timeline-sequence="GridLoading"
                        data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.openServerSideDialogWithSelectedItem", "params":{"dialogId":"serverSideDialog1","sizeRatio":"0.9"},  "async" : true, "asyncKey" : "onChildItemClick"}}'>
                    View/Edit related child items
                </button>

            </div>
            <!-- end footer body -->

        </div>
        <!-- end grid footer -->


        <!-- Partial layouts-->

        <!-- Message shown to the user when the grid cannot load data due to Communication/Server error-->
        <div role="vpgrid-partial-ui"
             data-vpgrid-ui-id="vpGridErrorOnDataLoad"
             style="padding-top:20px;padding-left:20px;" class="vpgrid-hidden">
            <p>
                The grid is empty because of a communication error. Check that the server is up and running.
            </p>
        </div>

        <!-- Message shown to the user when the grid received no data from server -->
        <div role="vpgrid-partial-ui"
             data-vpgrid-ui-id="vpGridEmptyOnDataLoad"
             style="padding-top:20px;padding-left:20px;" class="vpgrid-hidden">
            <p>
                The grid is empty because there is no item to load from your request.
            </p>
        </div>

        <!-- Message shown to the user when user is filtering the grid but no data match the filter(s) -->
        <div role="vpgrid-partial-ui"
             data-vpgrid-ui-id="vpGridEmptyOnGridComplete"
             style="padding-top:20px;padding-left:20px;" class="vpgrid-hidden">
            <p>
                No data has been found for your search. Either change the filter value or reset at least one filter.
            </p>
        </div>

        <!-- End Partial layouts -->


        <!-- Modal dialog windows-->

        <!-- The loading window -->
        <div role="vpgrid-modal-dialog"
             title="Communicating with server..."
             class="vpgrid-hidden vpgrid-container vpgrid-modal-dialog"
             data-vpgrid-dialog-id="vpGridLoading"
             data-vpgrid-ui-widget="dialog"
             data-vpgrid-ui-widget-options='{ "modal": true, "autoOpen": false, "width": "auto", "height": "auto"}'
             data-vpgrid-timeline-sequence="GridLoading">

            <span class="ui-icon  ui-icon-clock" style="float: left; margin: 3px 7px 40px 0;"></span>
            Please wait until all data is loaded ...
        </div>


        <!-- Modal dialog Window to insert new items in the Grid -->
        <div role="vpgrid-modal-dialog"
             title="Add new Item"
             class="vpgrid-hidden vpgrid-container vpgrid-modal-dialog"
             data-vpgrid-dialog-id="vpGridAddNewItem"
             data-vpgrid-ui-widget="dialog"
             data-vpgrid-ui-widget-options='{ "modal": true, "autoOpen": false, "width": "auto", "height": "auto"}'
             data-vpgrid-timeline-sequence="GridLoaded">


            <div class="form-vpgrid-modal-dialog">
                <!-- Field : Product Name-->
                <div class="vp-row">
                    <!-- label -->
                    <div class="span4 text-right ">Product Name :</div>
                    <!-- input cell -->
                    <div class="span8 text-center text-small">
                        <input type="text" name="name" id="name"
                               class="text ui-widget-content ui-corner-all"
                               data-vpgrid-column-name="name"/>
                    </div>
                    <!-- end input cell -->
                </div>
                <!-- end Field : Product Name-->


                <!-- Field : Price -->
                <div class="vp-row">
                    <!-- label -->
                    <div class="span4 text-right ">Price :</div>
                    <!-- input cell -->
                    <div class="span8 text-center text-small">
                        <input type="text" name="price" id="price"
                               class="text ui-widget-content ui-corner-all"
                               data-vpgrid-column-name="price" />
                    </div>
                    <!-- end input cell -->
                </div>
                <!-- end Field : Price-->


                <hr />
                <!-- form buttons-->
                <div class="vp-row  vp-modal-dialog-bottom-buttons">
                    <div class="span12">
                        <!-- The OK button -->
                        <button type="button" class="float-right ui-button-text-icon-primary ui-icon-plusthick"
                                data-vpgrid-ui-widget="button"
                                data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-plusthick"}}'
                                data-vpgrid-timeline-sequence="GridLoaded"
                                data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.addNewItem", "params":"last", "async" : true}}'>
                            Add
                        </button>

                        <!-- The Cancel button -->
                        <button type="button" class="float-right ui-button-text-icon-primary ui-icon-cancel"
                                data-vpgrid-ui-widget="button"
                                data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-cancel"}}'
                                data-vpgrid-timeline-sequence="GridLoaded"
                                data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.closeModalDialog", "async" : true}}'>
                            Cancel
                        </button>

                    </div>

                </div>
                <!-- end form buttons-->
            </div>

        </div>
        <!-- End Modal Dialog vpGridAddNewItem-->

        <!-- Modal Dialog vpGridAddNewItemWithTabs -->
        <div role="vpgrid-modal-dialog"
             title="Add new Item"
             class="vpgrid-hidden vpgrid-container vpgrid-modal-dialog"
             data-vpgrid-dialog-id="vpGridAddNewItemWithTabs"
             data-vpgrid-ui-widget="dialog"
             data-vpgrid-ui-widget-options='{ "modal": true, "autoOpen": false, "width": "auto", "height": "auto"}'
             data-vpgrid-timeline-sequence="GridLoaded">

            <div class="form-vpgrid-modal-dialog">
                <!-- tabs -->
                <div data-vpgrid-ui-widget="tabs"
                     data-vpgrid-ui-widget-options='{"active": "0", "heightStyle" : "content"}'
                     data-vpgrid-timeline-sequence="GridLoaded">
                    <ul>
                        <li><a href="#tabs-1">tab1</a></li>
                        <li><a href="#tabs-2">tab2</a></li>
                    </ul>
                    <!-- TAB 1-->
                    <div id="tabs-1">

                        <!-- Field : Product Name-->
                        <div class="vp-row">
                            <!-- label -->
                            <div class="span4 text-right ">Product Name :</div>
                            <!-- input cell -->
                            <div class="span8 text-center text-small">
                                <input type="text" name="name" id="name"
                                       class="text ui-widget-content ui-corner-all"
                                       data-vpgrid-column-name="name" />
                            </div>
                            <!-- end input cell -->
                        </div>
                        <!-- end Field : Product Name-->

                        <!-- Field : Price -->
                        <div class="vp-row">
                            <!-- label -->
                            <div class="span4 text-right ">Price :</div>
                            <!-- input cell -->
                            <div class="span8 text-center text-small">
                                <input type="text" name="price" id="price"
                                       class="text ui-widget-content ui-corner-all"
                                       data-vpgrid-column-name="price" />
                            </div>
                            <!-- end input cell -->
                        </div>
                        <!-- end Field : Price-->

                        <!-- Field : Style -->
                        <div class="vp-row">
                            <!-- label -->
                            <div class="span4 text-right ">Style :</div>
                            <!-- input cell -->
                            <div class="span8 text-center text-small">
                                <select id="style"
                                        data-vpgrid-column-name="style"
                                        data-vpgrid-timeline-sequence="GridLoaded">
                                    <option>Universal</option>
                                    <option>Women's</option>
                                </select>
                            </div>
                            <!-- end input cell -->
                        </div>
                        <!-- end Field : Style-->

                        <!-- Field : Weight -->
                        <div class="vp-row">
                            <!-- label -->
                            <div class="span4 text-right ">Weight :</div>
                            <!-- input cell -->
                            <div class="span8 text-center text-small">
                                <input type="text" name="weight" id="weight"
                                       class="text ui-widget-content ui-corner-all"
                                       data-vpgrid-column-name="weight" />
                            </div>
                            <!-- end input cell -->
                        </div>
                        <!-- end Field : Weight-->


                    </div>
                    <!-- end TAB 1-->

                    <!-- TAB 2-->
                    <div id="tabs-2">
                    </div>
                    <!-- end TAB 2-->

                </div>
                <!-- end tabs -->

                <hr />
                <!-- form buttons-->
                <div class="vp-row  vp-modal-dialog-bottom-buttons">
                    <div class="span12">
                        <!-- The OK button -->
                        <button type="button" class="float-right ui-button-text-icon-primary ui-icon-plusthick"
                                data-vpgrid-ui-widget="button"
                                data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-plusthick"}}'
                                data-vpgrid-timeline-sequence="GridLoaded"
                                data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.addNewItem", "params":"last", "async" : true}}'>
                            Add
                        </button>

                        <!-- The Cancel button -->
                        <button type="button" class="float-right ui-button-text-icon-primary ui-icon-cancel"
                                data-vpgrid-ui-widget="button"
                                data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-cancel"}}'
                                data-vpgrid-timeline-sequence="GridLoaded"
                                data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.closeModalDialog", "async" : true}}'>
                            Cancel
                        </button>

                    </div>

                </div>
                <!-- end form buttons-->
            </div>

        </div>
        <!-- End Modal Dialog vpGridAddNewItemWithTabs -->

        <!-- Modal Dialog vpGridEditItemWithTabs -->
        <div role="vpgrid-modal-dialog"
             title="View/Edit Item"
             class="vpgrid-hidden vpgrid-container vpgrid-modal-dialog"
             data-vpgrid-dialog-id="vpGridEditItemWithTabs"
             data-vpgrid-ui-widget="dialog"
             data-vpgrid-ui-widget-options='{ "modal": true, "autoOpen": false, "width": "auto", "height": "auto"}'
             data-vpgrid-timeline-sequence="GridLoaded">


            <!-- Dialog title content redefinition : automatic customization of the UI-dialog title bar-->
            <div role="vpgrid-dialog-title-bar" class="vpgrid-hidden ">
                <span>View/Edit Item : </span>
                <span data-vpgrid-column-name="name"></span>
            </div>
            <!-- End Dialog title content definition-->


            <div class="form-vpgrid-modal-dialog">

                <!-- hidden input fields-->
                <input type="hidden" data-vpgrid-column-name="remoteId" />
                <!-- end hidden input fields-->

                <!-- tabs -->
                <div data-vpgrid-ui-widget="tabs"
                     data-vpgrid-ui-widget-options='{"active": "0", "heightStyle" : "content"}'
                     data-vpgrid-timeline-sequence="GridLoaded">
                    <ul>
                        <li><a href="#tabs-1">tab1</a></li>
                        <li><a href="#tabs-2">tab2</a></li>
                    </ul>
                    <!-- TAB 1-->
                    <div id="tabs-1">

                        <!-- Field : Product Name-->
                        <div class="vp-row">
                            <!-- label -->
                            <div class="span4 text-right ">Product Name :</div>
                            <!-- input cell -->
                            <div class="span8 text-center text-small">
                                <input type="text" name="name" id="name"
                                       class="text ui-widget-content ui-corner-all"
                                       data-vpgrid-column-name="name" />
                            </div>
                            <!-- end input cell -->
                        </div>
                        <!-- end Field : Product Name-->

                        <!-- Field : Price -->
                        <div class="vp-row">
                            <!-- label -->
                            <div class="span4 text-right ">Price :</div>
                            <!-- input cell -->
                            <div class="span8 text-center text-small">
                                <input type="text" name="price" id="price"
                                       class="text ui-widget-content ui-corner-all"
                                       data-vpgrid-column-name="price" />
                            </div>
                            <!-- end input cell -->
                        </div>
                        <!-- end Field : Price-->

                        <!-- Field : Style -->
                        <div class="vp-row">
                            <!-- label -->
                            <div class="span4 text-right ">Style :</div>
                            <!-- input cell -->
                            <div class="span8 text-center text-small">
                                <select id="style"
                                        data-vpgrid-column-name="style"
                                        data-vpgrid-timeline-sequence="GridLoaded">
                                    <option>Universal</option>
                                    <option>Women's</option>
                                </select>
                            </div>
                            <!-- end input cell -->
                        </div>
                        <!-- end Field : Style-->

                    </div>
                    <!-- end TAB 1-->

                    <!-- TAB 2-->
                    <div id="tabs-2">
                    </div>
                    <!-- end TAB 2-->

                </div>
                <!-- end tabs -->

                <hr />
                <!-- form buttons-->
                <div class="vp-row  vp-modal-dialog-bottom-buttons">
                    <div class="span12">

                        <button type="button" class="float-right ui-button-text-icon-primary ui-icon-circle-arrow-e"
                                data-vpgrid-ui-widget="button"
                                data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-circle-arrow-e"}}'
                                data-vpgrid-timeline-sequence="GridLoaded"
                                data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.updateItem", "params":{"tag":"partialUpdate1", "crudKey":"update2"}, "async" : true}}'>
                            Update
                        </button>

                        <button type="button" class="float-right ui-button-text-icon-primary ui-icon-cancel"
                                data-vpgrid-ui-widget="button"
                                data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-cancel"}}'
                                data-vpgrid-timeline-sequence="GridLoaded"
                                data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.closeModalDialog", "async" : true}}'>
                            Cancel
                        </button>

                    </div>

                </div>
                <!-- end form buttons-->
            </div>

        </div>
        <!-- End Modal Dialog vpGridEditItemWithTabs -->

        <!-- Modal Dialog vpGridDeleteItem -->
        <div role="vpgrid-modal-dialog"
             title="Delete Item"
             class="vpgrid-hidden vpgrid-container vpgrid-modal-dialog"
             data-vpgrid-dialog-id="vpGridDeleteItem"
             data-vpgrid-ui-widget="dialog"
             data-vpgrid-ui-widget-options='{ "modal": true, "autoOpen": false, "width": "auto", "height": "auto"}'
             data-vpgrid-timeline-sequence="GridLoaded">

            <!-- Dialog title content redefinition : automatic customization of the UI-dialog title bar-->
            <div role="vpgrid-dialog-title-bar" class="vpgrid-hidden ">
                <span>Delete Item : </span>
                <span data-vpgrid-column-name="name"></span>
            </div>
            <!-- End Dialog title content definition-->

            <span class="ui-icon  ui-icon-alert" style="float:left; margin:3px 7px 40px 0;">

            </span>
            <span>Do you want to really delete this item?</span>

            <hr />
            <div class="vp-row  vp-modal-dialog-bottom-buttons">
                <div class="span12">

                    <button type="button" class="float-right ui-button-text-icon-primary ui-icon-trash"
                            data-vpgrid-ui-widget="button"
                            data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-trash"}}'
                            data-vpgrid-timeline-sequence="GridLoaded"
                            data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.deleteCurrentRow", "async" : true}}'>
                        Delete
                    </button>

                    <button type="button" class="float-right ui-button-text-icon-primary ui-icon-cancel"
                            data-vpgrid-ui-widget="button"
                            data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-cancel"}}'
                            data-vpgrid-timeline-sequence="GridLoaded"
                            data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.closeModalDialog", "async" : true}}'>
                        Cancel
                    </button>

                </div>

            </div>

        </div>
        <!-- End Modal Dialog vpGridDeleteItem -->


        <!-- Modal Dialog vpGridCannotDeleteItem -->
        <div role="vpgrid-modal-dialog"
             title="Delete Item"
             class="vpgrid-hidden vpgrid-container vpgrid-modal-dialog"
             data-vpgrid-dialog-id="vpGridCannotDeleteItem"
             data-vpgrid-ui-widget="dialog"
             data-vpgrid-ui-widget-options='{ "modal": true, "autoOpen": false, "width": "auto", "height": "auto"}'
             data-vpgrid-timeline-sequence="GridLoaded">

            <span class="ui-icon  ui-icon-alert" style="float:left; margin:3px 7px 40px 0;">

            </span>
            <span>The selected item cannot be deleted.</span>

            <hr />
            <div class="vp-row  vp-modal-dialog-bottom-buttons">
                <div class="span12">

                    <button type="button" class="float-right ui-button-text-icon-primary ui-icon-cancel"
                            data-vpgrid-ui-widget="button"
                            data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-cancel"}}'
                            data-vpgrid-timeline-sequence="GridLoaded"
                            data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.closeModalDialog", "async" : true}}'>
                        Ok
                    </button>

                </div>

            </div>

        </div>
        <!-- End Modal Dialog vpGridCannotDeleteItem -->

        <!-- Modal Dialog vpGridToBeDone -->
        <!-- use this modal dialog to mockup button actions in tje grid-->
        <div role="vpgrid-modal-dialog"
             title=""
             class="vpgrid-hidden vpgrid-container vpgrid-modal-dialog"
             data-vpgrid-dialog-id="vpGridToBeDone"
             data-vpgrid-ui-widget="dialog"
             data-vpgrid-ui-widget-options='{ "modal": true, "autoOpen": false, "width": "auto", "height": "auto"}'
             data-vpgrid-timeline-sequence="GridLoaded">

            <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 40px 0;"></span>
            To be done
        </div>
        <!-- End Modal Dialog vpGridToBeDone -->

        <!-- Modal Dialog serverSideDialog1 -->
        <!-- Use the kind of modal dialog to show external web page ina jQuery UI Dialog-->
        <div role="vpgrid-modal-dialog"
             title=""
             class="vpgrid-hidden vpgrid-container vpgrid-modal-dialog"
             data-vpgrid-dialog-id="serverSideDialog1"
             data-vpgrid-ui-widget="dialog"
             data-vpgrid-ui-widget-options='{ "modal": true, "autoOpen": false, "width": "auto", "height": "auto"}'
             data-vpgrid-timeline-sequence="GridLoaded"
             data-vpgrid-url="StartTemplate.html">
        </div>


        <!-- End Modal dialog windows -->

    <!-- End vpGrid Container-->

    <!-- vpGrid initialization-->
    <script>
        $(function () {
            vpGrid.init(
                {
                    defaultCaption: "AdventureWorks Products",
                    enableCustomCaption : true,
                    enableFilterToolbar: true,
                    enableOperatorsInFilterToolbar: true,
                    enableCustomStatusBar: true,
                    enableRowCheckbox: true,
                    numberOfVisibleRows: 11,

                    datepickerOptions: {
                        dateFormat: 'yy/mm/dd'
                    },
                    crudOptions: {
                        read: "MockRequests/GetData1.html",
                        insert: "MockRequests/insert1.html",
                        update: "MockRequests/update1.html",
                        'delete': "MockRequests/delete1.html",
                        update2: "MockRequests/update2.html"

                    },
                    jqGridOptions: {
                        jgrid: {
                            formatter: {
                                integer: { thousandsSeparator: ",", defaultValue: '0' },
                                //integer: { thousandsSeparator: " ", defaultValue: '0' },

                                number: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2, defaultValue: '0.00' },
                                //number: { decimalSeparator: ",", thousandsSeparator: " ", decimalPlaces: 2, defaultValue: '0,00' },

                                currency: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "", suffix: " $", defaultValue: '0' },
                                //currency: { decimalSeparator: ",", thousandsSeparator: " ", decimalPlaces: 2, prefix: "", suffix: " €", defaultValue: '0' },

                                date: { srcformat: 'Y-m-d', newformat: 'Y/m/d' },
                            }
                        }
                    }

                });

        });
    </script>
    <!-- end vpGrid initialization-->

</body>
</html>
